import { CSSProperties, useMemo } from 'react';
import { Text, View } from '@tarojs/components';
import { GStyleSheet, DynamicColors } from '@/utils/DarkMode';
import CheckBox from '@/components/CheckBox';

const dstyles = GStyleSheet.create({
  content: {
    // padding: 15,
    display: 'flex',
    flexDirection: 'row',
    justifyContent: 'space-between',
    alignItems: 'center',
    backgroundColor: 'rgba(0,0,0,0)',
    paddingHorizontal: 20,
    paddingTop: 15,
    paddingBottom: 5,
  },
  roomName: {
    color: DynamicColors.normalTextColor,
    fontSize: 14
  },
  checkBox: {
    height: 18,
    width: 18,
    borderColor: '#A4A4A4',
  },
});

interface IProps {
  style?: CSSProperties;
  name?: string;
  showSel?: boolean;
  isSelected?: boolean;
  onSelectChange?: ({ isSelected }: { isSelected: boolean }) => void;
}

function CheckBoxItem({ style, name, isSelected, onSelectChange, showSel }: IProps) {
  const styles = dstyles.useDynamicStyle();

  const extra = useMemo(() => {
    return (
      <CheckBox
        style={styles.checkBox}
        checked={!!isSelected}
      />
    );
  }, [isSelected, styles]);

  return (
    <View
      style={{ ...styles.content, ...style }}
      onClick={() => { (onSelectChange && onSelectChange({ isSelected: !isSelected })) }}
    >
      <Text style={styles.roomName}>{name}</Text>
      {showSel && extra}
    </View>
  );
}

export default CheckBoxItem;

